<template>
  <div class="page_home">
    <div v-if="!showbreadcrumb">
      <Card>
        <Button type="primary" @click="onadd" style="float: right">{{
          $t("onAdd")
        }}</Button>
        <Form inline ref="formInline" :label-width="100">
          <FormItem
            :label="$t('equipment.deviceName')"
            style="margin-bottom: 0"
          >
            <Input v-model="formInline.orderId" :placeholder="$t('onEnter')" />
          </FormItem>
          <FormItem :label="$t('equipment.serialNumber')">
            <Input
              v-model="formInline.userId"
              :placeholder="$t('onEnter')"
              style="margin-bottom: 0"
            />
          </FormItem>
          <FormItem :label="$t('equipment.status')">
            <Select v-model="formInline.status" style="min-width: 200px">
              <Option :value="item.id" v-for="item in status" :key="item.id">{{
                item.name
              }}</Option>
            </Select>
          </FormItem>
          <FormItem :label="$t('equipment.region')">
            <Select
              v-model="formInline.medAreaId"
              style="min-width: 200px"
              :placeholder="$t('onSelect')"
            >
              <Option
                :value="item.id"
                v-for="item in provincelist"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem style="margin-bottom: 0">
            <Button type="primary" @click="init">{{ $t("onSearch") }}</Button>
          </FormItem>
        </Form>
      </Card>
      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        ref="table"
        sortable="custom"
        @on-sort-change="changeSort"
        @on-selection-change="changeSelect"
      >
        <template slot-scope="{ row }" slot="status">
          {{ row.status | status }}
        </template>
      </Table>
      <Row type="flex" justify="end" class="page" >
        <Page
          :current="formInline.pageNumber"
          :total="total"
          :page-size="formInline.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </div>
    <div v-if="showbreadcrumb">
      <Card class="breadcrumb">
        <a @click="showbreadcrumb = false">{{
          $t("equipment.equipmentManage")
        }}</a>
        >
        <template v-if="pop == 1">
          <a v-if="currentObj.id">{{ $t("onEdit") }}</a>
          <a v-else>{{ $t("onAdd") }}</a>
        </template>
          <a v-if="pop==2">{{ $t("location") }}</a>
            <a v-if="pop==3">{{ $t("onViewDetail") }}</a>
              <a v-if="pop==4">{{ $t("equipment.operator") }}</a>
      </Card>
      <Card style="margin-top: 20px">
        <addequip
          :item="currentObj"
          @handlerdevice="handlerdevice"
          v-if="pop == 1"
        ></addequip>
        <location v-if="pop == 2"></location>
        <detail v-if="pop == 3"></detail>
        <operator v-if="pop == 4"></operator>
      </Card>
    </div>
    <Modal v-model="showpop" :title="showpoptitle" @on-ok="asyncOK">
      <p v-html="content"></p>
      <div slot="footer">
        <Button type="default" @click="showpop = false">{{
          $t("onCancle")
        }}</Button>
        <Button type="primary" @click="showpop = false">{{
          $t("onSubmit")
        }}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import addequip from "./addequip";
import detail from "./detail";
import location from "./location";
import operator from "./operator";
import {
  initMedArea,
  getMedEquipmentList,
  deleteMedEquipment,
} from "@/api/index";
import Detail from "../../sys/message-manage/detail.vue";
export default {
  name: "",
  components: {
    addequip,
    operator,
    location,
    detail,
  },
  data() {
    return {
      pop: 1, //1:编辑或者添加，2：定位；3：查看详情4：查看操作师
      showpop: false,
      showpoptitle: "解锁机操作",
      content: "",
      currentObj: {},
      showbreadcrumb: false,
      formInline: {
        pageSize: 10,
        pageNumber: 1,
        status: 1,
      },
      provincelist: [],
      status: [
        {
          id: 1,
          name: "正常",
        },
        {
          id: 2,
          name: "锁机",
        },
        {
          id: 3,
          name: "故障",
        },
      ],
      data: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          type: "index",
          width: 60,
          align: "center",
        },

        {
          //  title: "设备名称",
          title: this.$t("equipment.deviceName"),
          key: "name",
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber")+'ID',
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.region"),
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.lockTime"),
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.status"),
          key: "status",
          slot: "status",
        },
        {
          title: this.$t("equipment.operate"),
          key: "action",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                this.$t("onEdit")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.setlock(params.row);
                    },
                  },
                },
                params.row.status
                  ? this.$t("equipment.lock")
                  : this.$t("equipment.unlock")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.onView(params.row);
                    },
                  },
                },
                this.$t("onViewDetail")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.getLocation(params.row);
                    },
                  },
                },
                this.$t("location")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.getoperator(params.row);
                    },
                  },
                },
                this.$t("equipment.operator")
              ),
            ]);
          },
        },
      ],
    };
  },
  mounted() {
    this.init()
  },
  computed: {
    lang() {
      return this.$store.state.app.lang;
    },
  },
  watch: {
    lang(val) {
      this.columns = [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          type: "index",
          width: 60,
          align: "center",
        },

        {
          //  title: "设备名称",
          title: this.$t("equipment.deviceName"),
          key: "name",
          align: "center",
        },
        {
          title: this.$t("equipment.serialNumber")+'ID',
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.region"),
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.lockTime"),
          key: "title",
          align: "center",
        },
        {
          title: this.$t("equipment.status"),
          key: "status",
          slot: "status",
        },
        {
          title: this.$t("equipment.operate"),
          key: "action",
          align: "center",
          width: 250,
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    },
                  },
                },
                this.$t("onEdit")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.setlock(params.row);
                    },
                  },
                },
                params.row.status
                  ? this.$t("equipment.lock")
                  : this.$t("equipment.unlock")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.onView(params.row);
                    },
                  },
                },
                this.$t("onViewDetail")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.getLocation(params.row);
                    },
                  },
                },
                this.$t("location")
              ),
              h("Divider", {
                props: {
                  type: "vertical",
                },
              }),
              h(
                "a",
                {
                  style: {
                    display: "inline-block",
                  },
                  on: {
                    click: () => {
                      this.getoperator(params.row);
                    },
                  },
                },
                this.$t("equipment.operator")
              ),
            ]);
          },
        },
      ];
    },
  },
  filters: {
    status(val) {
      switch (val) {
        case 1:
          return "正常";
        case 2:
          return "锁机";
        case 3:
          return "故障";
      }
    },
  },
  methods: {
    init() {
      this.getprovince();
      this.getlist();
    },
    handlerdevice(val) {
      console.log(val);
      this.showbreadcrumb = false;
      if (val) {
        //表示编辑或者更新
        this.getlist();
      }
    },
    getlist() {
      getMedEquipmentList(this.formInline).then((res) => {
        if (res.success) {
          this.data = res.result.content;
        }
      });
    },
    changePageSize(v) {
      this.formInline.pageSize = v;
      this.getlist();
    },
    getprovince() {
      initMedArea().then((res) => {
        console.log("area:", res);
        if (res.success) {
          this.provincelist = res.result;
        }
      });
    },
    onadd() {
      //新增
      this.currentObj = {};
      this.showbreadcrumb = true;
    },
    edit(item) {
      //编辑
      this.currentObj = item;
      this.showbreadcrumb = true;
    },
    setlock(item) {
      //操作解锁或者锁机
      console.log(item);
      this.showpop = true;
      this.content =
        "是否确认将<a>设备名称：360，设备ID：12345666</a>进行解锁？";
    },
    getLocation(item) {
      //获取定位
      //1:编辑或者添加，2：定位；3：查看详情4：查看操作师
      this.showbreadcrumb = true;
      this.pop = 2;
    },
    getoperator (item) {
      //查看操作师
      //1:编辑或者添加，2：定位；3：查看详情4：查看操作师
      this.showbreadcrumb = true;
      this.pop = 4;
    },
    onView(item) {
      this.showbreadcrumb = true;
      this.pop = 3;
    },
  },
};
</script>

<style lang="less" scoped>
.page_home {
  /deep/.ivu-form-item {
    margin-bottom: 10px !important;
  }
  .page{
    margin-top:15px;
  }
}
</style>